<template>
    <div class="index-container">
        <!-- Header -->
        <el-header class="main-header">
            <div class="header-title">互联网医疗服务后台管理</div>
            <div class="header-actions">
                <div class="header-action">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>{{ userStore.getUsername }}</span>
                </div>
                <div class="header-action">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </div>
                <div class="header-action">
                    <el-icon>
                        <SwitchButton />
                    </el-icon>
                    <span @click="handleLogout">退出</span>
                </div>
            </div>
        </el-header>

        <div class="main-container">
            <el-container>
                <!-- Sidebar -->
                <el-aside width="200px" class="main-sidebar">
                    <el-menu active-text-color="#2196F3" background-color="white" text-color="#333"
                        class="el-menu-vertical" default-active="1" router>

                        <el-menu-item index="/index/home" class="menu-item active">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>

                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>内容管理</span>
                            </template>
                            <el-menu-item index="/index/CarouselChart" class="submenu-item">轮播图管理</el-menu-item>
                            <el-menu-item index="/index/PopularScienceDisease" class="submenu-item">疾病科普</el-menu-item>
                            <el-menu-item index="/index/Hospital" class="submenu-item">医院管理</el-menu-item>
                            <el-menu-item index="/index/HospitalDepartments" class="submenu-item">医院科室管理</el-menu-item>
                            <el-menu-item index="/index/Pharmacy" class="submenu-item">药店管理</el-menu-item>
                            <el-menu-item index="/index/Question" class="submenu-item">常见问题</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>

                <!-- Main Content -->
                <el-main class="main-content">

                    <RouterView />

                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    User,
    House,
    Document,
    SwitchButton
} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

// 创建用户store
const userStore = {
    getUsername: 'admin',
    getNickname: '管理员',
    getUserRole: 'admin'
}

const router = useRouter()


onMounted(() => {
    // 初始化用户信息
})

const handleLogout = () => {
    ElMessageBox.confirm(
        '确定退出登录吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage.success('退出成功')
            router.push("/")
        })
        .catch(() => {
            // 用户取消操作
        })
}
</script>

<style scoped>
.index-container {
    height: 100vh;
    background-color: #f5f5f5;
}

.main-header {
    background-color: #2196F3;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
}

.header-actions {
    display: flex;
    gap: 20px;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.header-action:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.main-container {
    height: calc(100vh - 60px);
}

.main-sidebar {
    background-color: white;
    border-right: 1px solid #e0e0e0;
    min-height: 100vh;
}

.el-menu-vertical {
    border-right: none;
}

.menu-item {
    border-bottom: 1px solid #f0f0f0;
}

.menu-item.active {
    background-color: #e3f2fd;
    border-left: 4px solid #2196F3;
}

.submenu-item {
    padding-left: 40px !important;
}

.main-content {
    padding: 20px;
    background-color: #f9f9f9;
}

.content-wrapper {
    background-color: white;
    border-radius: 4px;
    padding: 20px;
    min-height: calc(100vh - 140px);
}

.page-title {
    font-size: 24px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    text-align: center;
    border: 1px solid #e0e0e0;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #f44336;
    margin-bottom: 10px;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.section-card {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #333;
}

.date-picker {
    width: 120px;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #2196F3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 20px;
}

.action-text {
    font-size: 12px;
    color: #666;
    text-align: center;
}

.pending-tasks {
    display: flex;
    justify-content: space-around;
}

.task-item {
    padding: 10px;
    color: #666;
    font-size: 14px;
}

.stats-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.stats-column {
    border: 1px solid #e0e0e0;
}

.stats-header {
    font-weight: bold;
    color: #333;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px;
}

.stats-item {
    text-align: center;
}

.stats-number {
    font-size: 18px;
    font-weight: bold;
    color: #f44336;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 12px;
    color: #666;
}

.chart-area {
    padding: 20px;
    min-height: 200px;
    position: relative;
}

.unit-label {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: #666;
    font-size: 12px;
}
</style>
